<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerList" :key="index" lazy-render @click="url(item)">
        <img :src="item.tpic">
      </van-swipe-item>
    </van-swipe>
    <div class="onSearch">
      <form action="/" class="search-form">
        <van-search background="#ffffff" v-model="form.keyword" placeholder="搜索需求内容" @search="onSearch" @clear="clear">
          <template #label>
            <div class="label_icon">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo" />
              </svg>
              <span>|</span>
            </div>
          </template>
        </van-search>
      </form>
    </div>

    <van-sticky z-index="9">
      <div class="pub_tab">
        <div class="TabbarSlide_head">
          <div class="tabbarW">
            <van-tabs v-model:active="active" @click-tab="onClickTab" animated sticky :line-height="8"
              title-active-color="#12142E" title-inactive-color="#454757" color="#FF7A1F" background="#f7f7f7">
              <van-tab :title="`${item.name}`" v-for="(item, index) in type" :key="index" :name="item.id" />
            </van-tabs>
          </div>
          <div class="calendar" @click="isShows = true">
            <svg class="calendar_svg" aria-hidden="true">
              <use xlink:href="#icon-gengduo" />
            </svg>
          </div>
        </div>
      </div>
    </van-sticky>
    <div class="content_box" v-if="listData.length > 0">
      <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" @load="loadMore" :immediate-check="false">
          <div class="new_demand" @click="infodetail(demand.id)" v-for="(demand, index) in listData" :key="index">
            <div class="new_demand_item">
              <div class="new_demand_itemMr">
                <p class="content1 fontBold color1 van-multi-ellipsis--l2">
                  <span class="you" v-show="demand.is_quality">优</span>
                  <van-tag style="height:18px;width:42px;justify-content: center;" class="tagleft" color="#FF7A1F"
                    type="primary">
                    {{ demand.type }}
                  </van-tag>
                  {{ demand.title }}
                </p>
              </div>
              <div class="new_demand_itemMr">
                <span class="descs font400 content2 color3 van-multi-ellipsis--l3" v-html="demand.desc" />
              </div>
              <div class="new_demand_itemMr">
                <div class="new_demand_img">
                  <van-image v-for="(img, g) in demand.morepic" :key="g" width="70" height="70" fit="cover"
                    style="margin-right: 10px" :src="img" />
                </div>
              </div>
              <div class="font400 content2 color6">
                <span class="conut_num">{{ demand.create_time }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <no-data v-if="listData.length === 0" />
    <van-button block size="small" type="danger" class="request-btn" @click="handleCreateDemand">
      发布需求
    </van-button>
    <van-popup v-model:show="isShows" round position="bottom" :style="{ height: '30%' }">
      <div class="checkbox">
        <div class="descriptionBox" @click="check(item.id, index)" v-for="(item, index) in type" :key="index">
          <div class="description" :class="{ active: activeTab == index }" @click="isShows = false">
            {{ item.name }}
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { demandList, getDemandType, getBanner } from '@/api/index'
import { useStore } from 'vuex'
import { Dialog } from 'vant'
const store = useStore()
const NoData = defineAsyncComponent(() => import('@/components/NoData/index.vue'))
const router = useRouter()
const route = useRoute()
const active: any = ref(Number(route.query.type) || 0)
const loading: any = ref(false)
const finished: any = ref(false)
const refreshing: any = ref(false)
const isShows: any = ref(false)
const activeTab: any = ref(0)
const listData: any = ref([])
const type: any = ref([])
const bannerList: any = ref([])
const form: any = ref({
  page: 1,
  pageSize: 10,
  keyword: ''
})

const banner = async () => {
  bannerList.value = await getBanner({ type: 3 })
}

banner()

const getType = async () => {
  type.value = await getDemandType({ type: 'demand', is_all: 1 })
}

getType()

const clear = async () => {
  form.value.keyword = ''
  onRefresh()
}

const selectedDemandTypeId = computed(() => {
  return Number(route.query.type) || 0
})

watch(selectedDemandTypeId, (newVal, oldVal) => {
  onRefresh()
})

const url = async (item: any) => {
  if (item.href) {
    window.location.href = item.href
  }
}

const onClickTab = async (item: any) => {
  router.replace({
    path: '/demand',
    query: { type: item.name }
  })
  activeTab.value = Number(item.name)
}

const check = async (id: any, index: any) => {
  router.replace({
    path: '/demand',
    query: { type: Number(id) }
  })
  activeTab.value = Number(index)
  active.value = Number(id)
}

const onSearch = async (val: any) => {
  form.value.keyword = val
  onRefresh()
}

const onRefresh = async () => {
  form.value.page = 1
  const list: any = await loadDemandList()
  listData.value = list
  refreshing.value = false
}

const loadMore = async () => {
  form.value.page = form.value.page + 1
  const list: any = await loadDemandList()
  listData.value = [...listData.value, ...list]
  loading.value = false
}

const loadDemandList = async () => {
  // 异步更新数据
  const res: any =
    (await demandList({ ...form.value, type: selectedDemandTypeId.value })) || []
  if (!Array.isArray(res) && typeof res.list === 'object') {
    const keys: any = Object.keys(res.list)
    const newRes: any = keys.map((k: any) => res.list[k])
    finished.value = newRes.length < form.value.pageSize
    return newRes
  }

  finished.value = res.list.length < form.value.pageSize
  return res
}

onRefresh()

const infodetail = async (id: any) => {
  router.push({ path: '/demand/details', query: { id: id } })
}

const handleCreateDemand = async () => {
  await store.dispatch('fetchUserInfo')
  if (store.state.userInfo.is_vip === 1) {
    router.push('/demand/create')
  } else {
    Dialog.confirm({
      title: '温馨提示',
      message: '房协会员专属权限，快去申请入会吧',
      confirmButtonText: '去入会',
      cancelButtonText: '暂不入会'
    })
      .then(() => {
        router.replace('/userCenter')
      })
  }
}

</script>

<style lang="less" scoped>
// /deep/.van-tab--active {
//   font-size: var(--19) !important;
// }

// /deep/.van-tabs__nav {
//   display: initial;
//   margin: 0 15px;
// }

// /deep/.van-tab {
//   font-size: 14px;
//   margin-right: 32px;
//   display: inline-block;
// }

.home {

  // margin: 0 15px;
  .request-btn {
    font-size: 16px;
    border: none;
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 149px;
    height: 44px;
    background: #ff7a1f;
    box-shadow: 0px 2px 10px 0px rgba(238, 111, 42, 0.5);
    border-radius: 5px;
  }

  .my-swipe {
    width: 340px;
    height: 146px;
    background: #ff7a1f;
    box-shadow: 0px 2px 10px 0px rgba(238, 150, 103, 0.5);
    border-radius: 5px;
    margin: 16px auto;

    img {
      width: 100%;
      height: 146px;
      object-fit: cover;
    }
  }

  .onSearch {
    border-radius: 5px;
    // margin-bottom: 20px;
    width: 90%;
    margin: 0 auto 20px;

    .label_icon {
      overflow: hidden;
      display: flex;
      align-items: center;

      .icon {
        width: 16px;
        height: 16px;
        object-fit: cover;
        margin-right: 14px;
      }

      span {
        margin: 0 14px 0 0;
        color: #d8d8d8;
      }
    }

    .van-field__left-icon {
      display: none;
    }
  }
}

.content_box {
  margin-top: 18px;

  .new_demand {
    width: 90%;
    // height:480px;
    background: #ffffff;
    box-shadow: 0px 2px 12px 3px rgba(153, 153, 153, 0.24);
    border-radius: 5px;
    margin: 0 auto 20px;

    .new_demand_item {
      padding: 15px;

      .excellent {
        width: 23px;
        height: 26px;
        float: right;
        position: relative;
        top: -16px;
      }

      .title {
        width: 230px;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        color: #464855;
        // margin-left:5px;
        vertical-align: middle;
      }

      .new_demand_itemMr {
        margin-bottom: 15px;

        .you {
          width: 18px;
          height: 18px;
          background: #FF2F1F;
          border-radius: 2px 2px 2px 2px;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 19px;
          display: inline-block;
          text-align: center;
          margin-right: 4px;
        }

        .descs {
          line-height: 1.5;
        }

        .tagleft {
          margin-right: 5px;
        }

        .demand_num {
          color: #cf0000;
          font-size: 13px;
          font-weight: 400px;
        }

        .new_demand_img {
          display: flex;
        }

        .iconSvg {
          width: 14px;
          height: 14px;
        }

        p {
          line-height: 23px;
        }
      }

      .docking {

        // border-top:1px solid #eee;
        // border-bottom:1px solid #eee;
        // padding:10px 0;
        .docking_item {
          display: flex;
          align-items: flex-start;
          border-top: 1px solid #eee;
          // border-bottom: 1px solid #eee;
          padding: 15px 0 5px 0;

          // justify-content: space-between;
          p {
            margin-top: 0;
            margin-bottom: 5px;
          }

          .docking_img {
            width: 30px;
            height: 30px;

            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              object-fit: cover;
            }
          }
        }

        .docking_info {
          margin-left: 10px;

          .name {
            font-size: 12px;
            font-weight: bold;
            color: #333;
          }

          .desc {
            font-size: 13px;
            font-weight: 400;
            color: #464855;
            line-height: 1.5;
            word-break: break-word;
          }

          .time {
            font-size: 12px;
            font-weight: 400;
            color: #464855;
            opacity: 0.6;
          }

          .file {
            width: 240px;
            height: 62px;
            background: #f6f6f6;
            border-radius: 5px;
            position: relative;

            span {
              font-size: 12px;
              font-weight: 400;
              color: #464855;
              padding-left: 15px;
              position: relative;
              top: 10px;
              display: inline-block;
              width: 168px;
              word-break: break-all;
            }

            .iconfont {
              font-size: 34px;
              position: absolute;
              right: 13px;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
  }
}

.pub_tab {
  position: relative;
  background: rgb(247, 247, 247);

  .calendar {

    // width: 24px;
    // height: 24px;
    // position: absolute;
    // top: 0;
    // right: 0;
    // background: #f7f7f7;
    // z-index: 99999;
    .calendar_svg {
      // width: 100%;
      // height: 100%;
    }
  }
}

.tabbarW {
  width: 89%;
}

.TabbarSlide_head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .TabbarSlide_svg {
    width: 20%;
    height: 40px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
  }

  .calendar_svg {
    margin-right: 15px;
    width: 20px;
    height: 20px;
  }
}

.checkbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}

.checkbox .descriptionBox {
  width: 30%;
}

.checkbox .descriptionBox .description {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #333;
  border-radius: 30px;
  // background-color: #ca0029;
  color: #333;
  margin: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #464855;
}

.active {
  background-color: #ff7a1f;
  color: #fff !important;
  border: 1px solid #ff7a1f !important;
}

@media (min-width: 750px) {
  // /deep/.van-tab--active {
  //   font-size: var(--19) !important;
  // }

  // /deep/.van-tabs__nav {
  //   display: initial;
  //   margin: 0 15px;
  // }

  // /deep/.van-tab {
  //   font-size: 14px;
  //   margin-right: 32px;
  //   display: inline-block;
  // }

  .home {

    // margin: 0 15px;
    .request-btn {
      font-size: 16px;
      border: none;
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      width: 149px;
      height: 44px;
      background: #ff7a1f;
      box-shadow: 0px 2px 10px 0px rgba(238, 111, 42, 0.5);
      border-radius: 5px;
    }

    .my-swipe {
      width: 340px;
      height: 146px;
      background: #ff7a1f;
      box-shadow: 0px 2px 10px 0px rgba(238, 150, 103, 0.5);
      border-radius: 5px;
      margin: 16px auto;

      img {
        // width: 100%;
        height: 146px;
        object-fit: cover;
      }
    }

    .onSearch {
      border-radius: 5px;
      // margin-bottom: 20px;
      width: 90%;
      margin: 0 auto 20px;

      .label_icon {
        overflow: hidden;
        display: flex;
        align-items: center;

        .icon {
          width: 16px;
          height: 16px;
          object-fit: cover;
          margin-right: 14px;
        }

        span {
          margin: 0 14px 0 0;
          color: #d8d8d8;
        }
      }

      .van-field__left-icon {
        display: none;
      }
    }
  }

  .content_box {
    margin-top: 18px;

    .new_demand {
      width: 90%;
      // height:480px;
      background: #ffffff;
      box-shadow: 0px 2px 12px 3px rgba(153, 153, 153, 0.24);
      border-radius: 5px;
      margin: 0 auto 20px;

      .new_demand_item {
        padding: 15px;

        .excellent {
          width: 23px;
          height: 26px;
          float: right;
          position: relative;
          top: -16px;
        }

        .title {
          width: 230px;
          display: inline-block;
          font-size: 16px;
          font-weight: bold;
          color: #464855;
          // margin-left:5px;
          vertical-align: middle;
        }

        .new_demand_itemMr {
          margin-bottom: 15px;

          .you {
            width: 18px;
            height: 18px;
            background: #FF2F1F;
            border-radius: 2px 2px 2px 2px;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 19px;
            display: inline-block;
            text-align: center;
            margin-right: 4px;
          }

          .descs {
            line-height: 1.5;
          }

          .tagleft {
            margin-right: 5px;
          }

          .demand_num {
            color: #cf0000;
            font-size: 13px;
            font-weight: 400px;
          }

          .new_demand_img {
            display: flex;
          }

          .iconSvg {
            width: 14px;
            height: 14px;
          }

          p {
            line-height: 23px;
          }
        }

        .docking {

          // border-top:1px solid #eee;
          // border-bottom:1px solid #eee;
          // padding:10px 0;
          .docking_item {
            display: flex;
            align-items: flex-start;
            border-top: 1px solid #eee;
            // border-bottom: 1px solid #eee;
            padding: 15px 0 5px 0;

            // justify-content: space-between;
            p {
              margin-top: 0;
              margin-bottom: 5px;
            }

            .docking_img {
              width: 30px;
              height: 30px;

              img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                object-fit: cover;
              }
            }
          }

          .docking_info {
            margin-left: 10px;

            .name {
              font-size: 12px;
              font-weight: bold;
              color: #333;
            }

            .desc {
              font-size: 13px;
              font-weight: 400;
              color: #464855;
              line-height: 1.5;
              word-break: break-word;
            }

            .time {
              font-size: 12px;
              font-weight: 400;
              color: #464855;
              opacity: 0.6;
            }

            .file {
              width: 240px;
              height: 62px;
              background: #f6f6f6;
              border-radius: 5px;
              position: relative;

              span {
                font-size: 12px;
                font-weight: 400;
                color: #464855;
                padding-left: 15px;
                position: relative;
                top: 10px;
                display: inline-block;
                width: 168px;
                word-break: break-all;
              }

              .iconfont {
                font-size: 34px;
                position: absolute;
                right: 13px;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
      }
    }
  }

  .pub_tab {
    position: relative;
    background: rgb(247, 247, 247);

    .calendar {

      // width: 24px;
      // height: 24px;
      // position: absolute;
      // top: 0;
      // right: 0;
      // background: #f7f7f7;
      // z-index: 99999;
      .calendar_svg {
        // width: 100%;
        // height: 100%;
      }
    }
  }

  .tabbarW {
    width: 89%;
  }

  .TabbarSlide_head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .TabbarSlide_svg {
      width: 20%;
      height: 40px;
      line-height: 50px;
      text-align: center;
      background-color: #fff;
    }

    .calendar_svg {
      margin-right: 15px;
      width: 20px;
      height: 20px;
    }
  }

  .checkbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
  }

  .checkbox .descriptionBox {
    width: 30%;
  }

  .checkbox .descriptionBox .description {
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #333;
    border-radius: 30px;
    // background-color: #ca0029;
    color: #333;
    margin: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #464855;
  }

  .active {
    background-color: #ff7a1f;
    color: #fff !important;
    border: 1px solid #ff7a1f !important;
  }
}
</style>
